import Taro, { Component } from '@tarojs/taro'
import { View, Image, Text, Swiper, SwiperItem } from '@tarojs/components'
import { AtIcon } from 'taro-ui'
import { Header } from '../common/header';
import { GoodsItem } from '../components/goodsItem'
import './index.scss'
import '../../icon.scss';
import { banners } from '../utils/api'

export class IndexItem extends Component {
  state = {
    banner:[]
  }
  constructor(props){
    super(props);
  }

  componentWillMount () { }

  async componentDidMount () { 
    this.setState({
      banner: await banners(),
    });
  }

  handleRedirect(pages){
    if(pages){
      Taro.navigateTo({
        url: pages
      });
    }
  }

  render () {
    return (
        <View style={{paddingBottom:this.props.mb}}>
          <Header title='商城'></Header>
          <Swiper
            className='test-h'
            indicatorColor='#999'
            indicatorActiveColor='#333'
            circular
            indicatorDots
            autoplay>
            {
              this.state.banner.map(function(item){
              return <SwiperItem>
                <Image src={item.images} mode='widthFix' onClick={this.handleRedirect.bind(this, item.target_url)}/>
              </SwiperItem>
              })
            }
          </Swiper>
          <View className='index-active'>
            <View className='index-active-item'>
              <Image src='http://images.guoxiaoge.cn/%E9%82%80%E8%AF%B7@2x.png' mode='widthFix' />
              <Text>邀请有礼</Text>
            </View>
            <View className='index-active-item' onClick={this.handleRedirect.bind(this, '/pages/center/sign')}>
              <Image src='http://images.guoxiaoge.cn/%E8%AE%A2%E5%9C%BA@2x.png' mode='widthFix' />
              <Text>每日签到</Text>
            </View>
            <View className='index-active-item' onClick={this.handleRedirect.bind(this, '/pages/order/index?index=0')}>
              <Image src='http://images.guoxiaoge.cn/%E8%AE%A2%E5%8D%95%284%29@2x.png' mode='widthFix' />
              <Text>订单查询</Text>
            </View>
            <View className='index-active-item'>
              <Image src='http://images.guoxiaoge.cn/%E5%85%85%E5%80%BC@2x.png' mode='widthFix' />
              <Text>立即充值</Text>
            </View>
          </View>
          <View className='index-active-recommond'>
            <Image className='index-active-recommond-1' src='http://images.guoxiaoge.cn/%E5%9B%BE%E5%B1%822@2x.png' mode='widthFix' />
            <Image className='index-active-recommond-2' src='http://images.guoxiaoge.cn/%E5%93%81%E9%B2%9C%E5%BF%AB%E4%BA%BA%E4%B8%80%E6%AD%A5@2x.png' mode='widthFix' />
            <Image className='index-active-recommond-3' src='http://images.guoxiaoge.cn/%E6%8B%BC%E8%B6%8A%E5%A4%9A%E7%9C%81%E8%B6%8A%E5%A4%9A@2x.png' mode='widthFix' />
            <Image src='http://images.guoxiaoge.cn/%E8%BD%BB%E6%9D%BE%E4%BA%AB%E5%8F%97%E6%8A%98%E4%B8%8A%E6%8A%98@2x.png' mode='widthFix' />
          </View>
          <View className='index-goods-list'>
            <View className='index-goods-list-title'>
              <View className='index-goods-list-title-content'>
                <Text>编辑精选</Text>
                <View></View>
              </View>
              <View className='index-goods-list-more' onClick={this.handleRedirect.bind(this, '/pages/goods/goods')}>
                <Text>更多</Text>
                <AtIcon value='chevron-right' size='22' color='#B1B1B1'></AtIcon>
              </View>
            </View>

            {/* goods-item */}
            <GoodsItem />
          </View>
        </View>
    )
  }
}